<template>
    <!-- 通知之“公告”菜单项显示内容 -->
    <div id="message-advise-common-contrainer">
        <el-row>
            <span id="clear-all-messages" @click="delAll()">清空所有消息</span>
        </el-row>
        <el-row v-for="(commonAdvise,index) in commonAdvises" :key="index" >    
            <div v-show="commonAdvise.isdel">
                <el-row >
                    <span id="message-tag">
                        公告
                    </span>
                    &nbsp;
                    <span id="message-title">
                        {{commonAdvise.title}}
                    </span>
                    <span id="message-remove">
                        <i class="el-icon-delete" @click="delAnn(commonAdvise.aid,index)"/>
                    </span>
                    <span id="message-time">
                        {{commonAdvise.publishTime}}
                    </span>
                </el-row>
                <el-row>
                    <span id="message-content">
                    {{commonAdvise.notice}}
                    </span>
                </el-row>
                <el-divider/>
            </div>
        </el-row>
        <div v-show="show">
        </div>
    </div>    
</template>
<script>

import cookie from 'js-cookie'

export default {
    name: 'CommonAdvise',
    data(){
        return{
            commonAdvises:[ ],
             //用户信息
            user:{
                
            },
            show:true,
        }
    },
    created(){
        this.getUser()
        this.findAnn()
        
    },
    
    methods: {
        //查询所有数据
        findAnn(){
            this.$http.get(`http://localhost:7001/advise/findAnn/${this.user.id}`).then(res=>{
                this.commonAdvises=res.data
                //console.log(this.commonAdvises.length)
                for(let i=0;i<this.commonAdvises.length;i++){
                    this.commonAdvises[i].isdel=true
                }
                console.log(res.data)
                console.log(this.commonAdvises)
                
            })
        },
        //删除一个数据
        delAnn(aid,index){
            // console.log("执行了delAnn")
            // console.log("前")
            //console.log(this.commonAdvises[index].isdel)
            //this.commonAdvises[index].isdel=false
            // console.log(this.commonAdvises[index])
            // console.log("后")

            this.$http.get(`http://localhost:7001/advise/delAnn/${aid}/${this.user.id}`).then(res=>{
               
               this.commonAdvises[index].isdel=false
                // this.$router.push({
                //     path: `commonAdvise`    
                // })
                this.del()
            })
            console.log(this.commonAdvises[index].isdel)
            this.commonAdvises[index].isdel=false
            
        },
        //删除所有数据
        delAll(){
            console.log("删除了所有数据")
            this.$http.get(`http://localhost:7001/advise/delAll/${this.user.id}`).then(res=>{
                for(let i=0;i<this.commonAdvises.length;i++){
                    this.commonAdvises[i].isdel=false
                }
                this.del()
            })
        },
        //从cookie中获取用户信息
        getUser(){
            console.log("执行了公告的获取user")
            this.user=JSON.parse(cookie.get("user"))
            console.log("手机号"+this.user.phone)
            console.log(this.user.id)
        },
        //
        del(){
            this.show=false;
            this.show=true
        }

    }
}
</script>
<style>
    #clear-all-messages {
        color: blue;
        font-size: 14px;
        cursor: pointer;
        float: right;
    }
    #message-tag {
        display: inline-block;
        border: 1px solid rgba(255, 0, 0, 0.678);
        border-radius: 4px;
        color: rgba(255, 0, 0, 0.678);
    }
    #message-title {
        font-size: 20px;
    }
    #message-time {
        float: right;
        font-size: 14px;
        color: #909399;
        line-height: 32px;
    }
    #message-remove {
        float: right;
        margin-left: 6%;
        font-size: 14px;
        line-height: 32px;
        cursor: pointer;
    }
    #message-content {
        display: inline-block;
        margin-top: 8px;
    }
    #message-advise-common-contrainer > .el-row:first-child {
        margin-bottom: 8px;
    }
    #message-advise-common-contrainer > .el-divider {
        margin: 12px auto;
    }
    #message-advise-common-contrainer{
        height: 300px
    }
</style>